<template>
  <div class="tools" v-show="item.click">
    <div class="back" @click="(e) => back(e, item)"></div>
    <div class="next" @click="(e) => next(e, item)"></div>
    <div class="delete" @click="(e) => deleteFn(e, item)"></div>
  </div>
</template>
<script setup lang="ts">
import {deleteFn} from "./index"
defineProps(["item"]);
const dragStore = useDrag();
function next(e: any, item: IStdOContainerRender | IStdOFormItemRender) {
  if (dragStore.clickParent) {
    let { parent, iteindex } = dragStore.clickParent;
    if (iteindex === undefined) return ElMessage.error("移动失败");
    if (iteindex == parent.childrens.length - 1) return ElMessage.error("已经是最后一个了");
    change(iteindex, iteindex + 1, parent.childrens as IStdOFormItemRender[]);
  }
  let indey = dragStore.renderData.findIndex((ite) => {
    return item.id == ite.id;
  });
  change(indey, indey + 1, dragStore.renderData);
}

function back(e: any, item: IStdOContainerRender | IStdOFormItemRender) {
  if (dragStore.clickParent) {
    let { parent, iteindex } = dragStore.clickParent;
    if (!iteindex) return ElMessage.error("移动失败");
    if (iteindex == 0) return ElMessage.error("已经是第一个了");
    if (parent) change(iteindex, iteindex - 1, parent.childrens as IStdOFormItemRender[]);
  }
  let indey = dragStore.renderData.findIndex((ite) => {
    return item.id == ite.id;
  });
  change(indey, indey - 1, dragStore.renderData);
}
function change(index1: number, index2: number, arrs: IStdORender[]) {
  let arr = arrs[index2];
  arrs[index2] = arrs[index1];
  arrs[index1] = arr;
}
</script>
<style lang="scss" scoped>
.tools {
  position: absolute;
  bottom: -23px;
  right: -1px;
  font-size: 12px;
  background-color: #409eff;
  padding: 5px;
  border-radius: 0px 0px 5px 5px;
  display: flex;
  z-index: 2027;
  div {
    height: 13px;
    width: 13px;
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .next {
    margin: 0px 5px;
    background-image: url("./img/next.png");
  }
  .back {
    background-image: url("./img/back.png");
  }
  .delete {
    background-image: url("./img/deleteFormItem.png");
  }
}
</style>
